<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Gibbons - Login</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="STYLESHEET" type="text/css" href="css/fg_membersite.css" />
<script src="js/jquery-1.7.1.js" type="text/javascript" language="javascript"></script>
<script language="javascript">
//  Developed by Roshan Bhattarai 
//  Visit http://roshanbh.com.np for this script and more.
//  This notice MUST stay intact for legal use

$(document).ready(function()
{
	$("#login_form").submit(function()
	{
	$("#logoutmsg").html("");
	$("#submit").hide();
	$("#circle").show();
	$("#circle").html("<img src='images/loading.gif'>");
		//remove all the class add the messagebox classes and start fading
		$("#msgbox").removeClass().addClass('messagebox').text('Validating....').fadeIn(1000);
		//check the username exists or not from ajax
		$.post("ajax_login.php",{ user_name:$('#username').val(),password:$('#password').val(),rand:Math.random() } ,function(data)
        {		
		  if(data=='yes') //if correct login detail
		  {
		  	$("#msgbox").fadeTo(200,0.1,function()  //start fading the messagebox
			{ 
			  //add message and change the class of the box and start fading
			  $(this).html('Logging in.....').addClass('messageboxok').fadeTo(900,1,
              function()
			  { 
			  	 //redirect to secure page
				 document.location='home.php';
			  });
			  
			});
		  }
		  else 
		  {
		  	$("#msgbox").fadeTo(200,0.1,function() //start fading the messagebox
			{ 
			  //add message and change the class of the box and start fading
			  $("#circle").hide();
			  $(this).html('Username/password does not exists...').addClass('messageboxerror').fadeTo(900,1);
			  $("#submit").show();
			});		
          }
				
        });
 		return false; //not to post the  form physically
	});
	//now call the ajax also focus move from 
	$("#password").blur(function()
	{
		$("#login_form").trigger('submit');
	});
});
</script>
<style type="text/css">
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
}
.top {
margin-bottom: 15px;
}
.buttondiv {
margin-top: 10px;
}
.messagebox{
	position:absolute;
	width:100px;
	/*margin-left:30px;*/
	/*border:1px solid #c93;*/
	/*background:#ffc;*/
	padding:3px;
}
.messageboxok{
	position:absolute;
	width:auto;
	/*margin-left:30px;*/
	/*border:1px solid #349534;*/
	/*background:#C9FFCA;*/
	padding:3px;
	font-weight:bold;
	color:#008000;
	
}
.messageboxerror{
	position:absolute;
	width:auto;
	/*margin-left:30px;*/
	/*border:1px solid #CC0000;*/
	/*background:#F7CBCA;*/
	padding:3px;
	font-weight:bold;
	color:#CC0000;
}

</style>

</head>
<body>

<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<div id="maincontainer">
<div id='fg_membersite'>
<form method="post" action="" id="login_form">
<fieldset >
<legend>Login</legend>
<?php
if(isset($_REQUEST["logout"]))
{
?>
<span style="color:green" id="logoutmsg">
You are successfully logout of the system.
</span>
<?php } ?>
<div class='short_explanation' style="display: block;float: right;">* required fields</div>


<div class='container'>
 <label for='username' >User Name*:</label><br/><input name="username" type="text" id="username" value="" maxlength="20" />
</div>
<div class='container'>
    <label for='password' >Password*:</label><br/>
    <input name="password" type="password" id="password" value="" maxlength="20" />
   
</div>
<div class='container'>
<span id="circle" style="display:none;"></span>
    <input name="Submit" type="submit" id="submit" value="Login"  /> <br /><br /><span id="msgbox" style="display:none"></span>
</div><br /> <br />
<div class='container'>
<span id="circle" style="display:none;"></span>
    <a href="../index.php"><center>Back To Website</center></a> <br /><br /><span id="msgbox" style="display:none"></span>
</div>
</fieldset>
</form>
</div>
</div>
</body>
</html>
